import React from 'react';
import { InputNumber, Radio } from 'antd';
import { connect } from 'umi';

import { config } from '@/assets';
import { NumberSub } from '@/utils';
import { EchartsType } from '@/pages/Tianji/DayRollingTradeStrategy/constant.js';
import ModelStepSetting from '../../modal/ModelStepSetting';
import { TjIcon } from '@/tjComponents/TjIcon';
import configGre from '@/assets/config_gre.svg';
import styles from './index.less';

const EchartsOperate = ({
  selectedEcharts,
  echartsBenefit,
  echartsPrice,
  echartsPower,
  upperPrice,
  lowerPrice,
  echartsHourOrderItem,
  capacity,
  dispatch,
}) => {
  const modelStepSettingRef = React.useRef();

  let echartsTypeList = [
    {
      value: EchartsType.THREE_DIMENSION,
      text: '三维模型',
    },
    {
      value: EchartsType.BENEFIT,
      text: '量-价截面',
    },
    {
      value: EchartsType.PRICE,
      text: '量-收益截面',
    },
    {
      value: EchartsType.POWER,
      text: '价-收益截面',
    },
  ];

  const changeType = (value) => {
    dispatch({
      type: 'dayRollingTradeStragety/setSelectedEcharts',
      payload: value,
    });
  };

  return (
    <div className={styles.echartsOperate}>
      <Radio.Group
        className={styles.radioGroup}
        value={selectedEcharts}
        onChange={(e) => {
          changeType(e.target.value);
        }}
      >
        {echartsTypeList.map((item) => {
          return (
            <Radio.Button className={styles.radio} value={item.value} key={item.value}>
              {item.text}
            </Radio.Button>
          );
        })}
      </Radio.Group>
      {selectedEcharts !== EchartsType.THREE_DIMENSION ? (
        <div className={styles.sectionParam}>
          {(() => {
            switch (selectedEcharts) {
              case EchartsType.BENEFIT:
                return (
                  <>
                    <span className={styles.label}>收益变动目标(元)</span>
                    <InputNumber
                      precision={2}
                      className={styles.input}
                      value={echartsBenefit}
                      onBlur={(e) => {
                        let value = e.target.value;
                        if (value === '' || !/^[-]?[\.\d]+$/.test(value)) return;
                        value = NumberSub(value, 2);
                        dispatch({
                          type: 'dayRollingTradeStragety/setEchartsBenefit',
                          payload: value,
                        });
                      }}
                    />
                    {/* <img
                      className={styles.icon}
                      src={config}
                      onClick={() => {
                        modelStepSettingRef.current.initHandle();
                      }}
                    /> */}
                    <TjIcon
                      gre={configGre}
                      dark={config}
                      className={styles.icon}
                      onClick={() => {
                        modelStepSettingRef.current.initHandle();
                      }}
                    />
                  </>
                );
              case EchartsType.PRICE:
                return (
                  <>
                    <span className={styles.label}>价格水平(元/MWh)</span>
                    <InputNumber
                      precision={2}
                      className={styles.input}
                      value={echartsPrice}
                      onBlur={(e) => {
                        let value = e.target.value;
                        if (value === '' || !/^[-]?[\.\d]+$/.test(value)) return;
                        if (value > upperPrice) {
                          value = upperPrice;
                        } else if (value < lowerPrice) {
                          value = lowerPrice;
                        }
                        value = NumberSub(value, 2);
                        dispatch({
                          type: 'dayRollingTradeStragety/setEchartsPrice',
                          payload: value,
                        });
                      }}
                    />
                  </>
                );
              case EchartsType.POWER:
                return (
                  <>
                    <span className={styles.label}>交易量(MWh)</span>
                    <InputNumber
                      precision={3}
                      className={styles.input}
                      value={echartsPower}
                      onBlur={(e) => {
                        let value = e.target.value;
                        if (value === '' || !/^[-]?[\.\d]+$/.test(value)) return;
                        if (value > capacity - echartsHourOrderItem.holdings) {
                          value = capacity - echartsHourOrderItem.holdings;
                        } else if (value < 0 - echartsHourOrderItem.holdings) {
                          value = 0 - echartsHourOrderItem.holdings;
                        }
                        value = NumberSub(value, 3);
                        dispatch({
                          type: 'dayRollingTradeStragety/setEchartsPower',
                          payload: value,
                        });
                      }}
                    />
                  </>
                );
            }
          })()}
        </div>
      ) : (
        ''
      )}
      <ModelStepSetting ref={modelStepSettingRef} />
    </div>
  );
};

export default connect(({ dayRollingTradeStragety }) => ({
  selectedEcharts: dayRollingTradeStragety.selectedEcharts,
  echartsBenefit: dayRollingTradeStragety.echartsBenefit,
  echartsPrice: dayRollingTradeStragety.echartsPrice,
  echartsPower: dayRollingTradeStragety.echartsPower,
  upperPrice: dayRollingTradeStragety.upperPrice,
  lowerPrice: dayRollingTradeStragety.lowerPrice,
  echartsHourOrderItem: dayRollingTradeStragety.echartsHourOrderItem,
  capacity: dayRollingTradeStragety.capacity,
}))(EchartsOperate);
